/**
 * Created by zhouming on 2018/11/6.
 */
import React from 'react';
import {Link} from 'react-router-dom'
import style from './css/courseList.css'
import {GlobalObj} from "../utils/GlobalObj";
import {CourseDetail} from './index'
export class CourseList extends React.Component{
    constructor(){
        super();
        this.state = {
            courseType:'',//课程类型
            courseList:[],//课程列表
            isShowDetail:false,
            showData:{}
        }
    }

    render(){
        const {isShowDetail,showData} = this.state;
        return (
            <div style={{margin:0,padding:0}}>
                {this._renderTitle()}
                {<div style={{height:'8rem'}}>

                </div>}
                {this._renderList()}
                {isShowDetail?this._renderCourseDetail():null}
            </div>
        );
    }

    _renderTitle = ()=>{
        const {header,text} = style;
        const {courseType} = this.state;
        return (
            <div className={header}>
                <Link to={'/'} style={{display:'flex',flexDirection:'row',textDecoration:'none',position:'absolute',left:0,alignSelf:'center'}}>
                    <p className={text} style={{marginLeft:'2rem'}}>{'<'}</p>
                    <p className={text} style={{marginLeft:'1rem'}}>{'返回'}</p>
                </Link>
                <p className={text}>{courseType}</p>
            </div>
        )
    };

    _renderList = ()=>{
        const {courseList}= this.state;
        const {content} = style;
        return (
            <div className={content}>
                {
                    courseList.map((res,index)=>this._renderItem(res,index))
                }
            </div>
        );
    }

    _renderItem = (res,index)=>{
        const {item,text} = style;
        const {courseName,courseType,part,author} = res;
        return (
            <div id= {'content'} className={item} key={index} onClick={this.userClick.bind(this,res)}>
                <div style={{width:'16rem'}}>
                    <p className={text} style={{marginLeft:'2rem'}}>{courseName}</p>
                </div>
                <div style={{width:'20rem',display:'flex',justifyContent:'center'}}>
                    <p className={text}>{courseType+'-part'+part}</p>
                </div>
                <div style={{width:'16rem',display:'flex',justifyContent:'flex-end'}}>
                    <p className={text} style={{marginRight:'2rem'}}>{author}</p>
                </div>
            </div>
        );
    }

    userClick = (item,res)=>{
        console.log(this);
        this.setState(
            {
                isShowDetail:true,
                showData:item
            }
        );
    }

    _renderCourseDetail = ()=>{
        const {detail} = style;
        const {showData} = this.state;
        return (
            <div className={detail}>
                <CourseDetail
                    courseData = {showData}
                    callback = {
                        ()=>{
                            this.setState({
                                isShowDetail:false
                            });
                        }
                    }
                />
            </div>
        );
    }


    getCourseType = (courseType)=>{
        let param = {};
        switch (courseType){
            case GlobalObj.type.math:
                param.courseType = '数学';
                param.type = 0;
                break;
            case  GlobalObj.type.english:
                param.courseType = '英语';
                param.type = 1;
                break;
            case GlobalObj.type.write:
                param.courseType = '写作';
                param.type = 2;
                break;
            case GlobalObj.type.logic:
                param.courseType = '逻辑';
                param.type = 3;
        }
        return param;
    }

    sidebarTouchMove = (e)=> {
        e.preventDefault();
    };

    forbidScroll = ()=>{
        // 为元素添加事件监听
        document.getElementById('content').addEventListener("touchmove", (e) => {
            // 执行滚动回调
            if(this.state.isShowDetail){
                this.sidebarTouchMove(e)
            }
        }, {
            passive: false //  禁止 passive 效果
        })

    };

    componentDidMount(){
        let param = this.getCourseType(GlobalObj.jumpType);
        this.setState({
            courseType:param.courseType,
            courseList:GlobalObj.appListData[param.type]?GlobalObj.appListData[param.type].list:[]
        });
        this.forbidScroll();

    }
}

